<template>
  <div class="home">
    <my-header :msg="'首页'" @abc="def"></my-header>
    <div>{{num}}</div>
    <div>{{age}}</div>
    <button @click="add">++</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted,ref, reactive, toRefs } from 'vue';
import myHeader from '../components/myHeader';
export default {
  name: 'HomeView',
  components: {
    myHeader
  },
  // created() {
  //   console.log('222');
  // },
  // // vue3 是支持 vue2的语法的
  // mounted() {
  //   let dom = document.querySelector('.home');
  //   console.log(dom);

  // },
  // data(){
  //   return{
  //     num: 10
  //   }
  // },
  // methods: {
  //   add(){
  //     this.num++;
  //   }
  // },
  setup(props) {
    const num = ref(10);
    console.log(num);
    // ref 声明基本数据类型的。
    // reactive 声明引用数据类型的。
    const add = () => {
      num.value++;
    }
    const data = reactive({
      age: 20
    })
    const def = () => {
       
       console.log('我是首页');
    }
    // onMounted(() => {
    //    let dom = document.querySelector('.home');
    //    console.log(dom);
    // })
    return {
      num,
      add,
      ...toRefs(data),
      def
    }
  }
}
</script>
